<template>
    <div class="card-box">
        <div v-if="title" class="title">
            {{ props.title }}
        </div>
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts"  setup>
// import { } from "vue";
const props = defineProps<{
    title?: string
}>();
</script>

<style lang="scss" scoped>
.card-box {
    background: #ffffff;
    box-shadow: 0 2px 10px 0 #ecedf2;
    border-radius: 8px;
    margin-top: 12px;
    box-sizing: border-box;
    padding-top: 10px;

    .title {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #181819;
        position: relative;
        padding-left: 13px;

        &::before {
            content: "";
            width: 4px;
            height: 16px;
            background: #e60044;
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }

    .content {
        margin-top: 7px;
        padding: 13px;
    }
}
</style>
